﻿@{
    ViewBag.Title = "Horizontal Menu Sample for MVC (Without Ajax.NET)";
    Layout = "~/Views/Shared/_LayoutLite.cshtml";
}

@section Scripts
{
    <script type="text/javascript">

        var mainMenu = null;

        $(document).ready(function () {

            var element = $("#mediaOutline").get(0);
            var settings = {
                menuClass: "menu-h",
                itemClass: "item",
                menuType: "Horizontal",
                hideDelay: 1.5
            };

            mainMenu = new SCS.MenuBehavior(element, settings);
            mainMenu.initialize();
        });

        $(document).unload(function () {

            mainMenu.dispose();
        });
    </script>
}

<h2>@ViewBag.Title</h2>

<p>@Html.ActionLink("Horizontal Menu", "Horizontal") | @Html.ActionLink("Horizontal Menu (Lite)", "HorizontalLite") | @Html.ActionLink("Vertical Menu", "Vertical") | @Html.ActionLink("Vertical Menu (Lite)", "VerticalLite")</p>

<ul id="mediaOutline" runat="server">
    <li><a href="/">Television</a>
        <ul>
            <li><a href="/">24</a></li>
            <li><a href="/">Friends</a></li>
            <li><a href="/">Simpsons</a></li>                    
            <li><a href="/">Seinfeld</a></li>                    
        </ul>
    </li>
    <li><a href="/">Movies</a>
        <ul>
            <li><a href="/">Scream</a></li>
            <li><a href="/">Terminator</a>
                <ul>
                    <li><a href="/">The Terminator</a></li>
                    <li><a href="/">Judgment Day</a></li>
                    <li><a href="/">Rise of the Machines</a></li>
                    <li><a href="/">Terminator Salvation</a></li>                            
                </ul>    
            </li>
            <li><a href="/">The Matrix</a></li>
        </ul>
    </li>
    <li><a href="/">Books</a>
        <ul>
            <li><a href="/">The Firm</a></li>
            <li><a href="/">Jurassic Park</a></li>
            <li><a href="/">Life Expectancy</a></li>
            <li><a href="/">Prince of Tides</a></li>
        </ul>
    </li>
</ul>



